<template>
  <div class="invite-friend-page">
    <!-- 顶部蓝色背景区域 -->
    <div class="invite-header">
      <img class="invite-bg" src="/static/img/mRK_de8de558_t1e.66c3bf79.png" alt="bg" />
      <div class="invite-header-bar">
        <img class="invite-back" src="@/assets/defi/back.png" alt="back" @click="$router.back()" />
        <img class="invite-help" src="@/assets/defi/wenhao.png" alt="help" @click="openFaq" />
      </div>
      <div class="invite-title">
        <div class="invite-title-sub" style="font-weight: 700;">{{ _t18('invite_title_sub') }}</div>
        <div class="invite-title-main">{{ _t18('invite_title_main') }}</div>
      </div>
      <div class="invite-tabs">
        <div class="invite-tab invite-tab-active">
          <img src="/static/img/x9L_2914b717_cCe.730b9683.png" :alt="_t18('invite_tab_1')" />
          <div class="invite-tab-label">{{ _t18('invite_tab_1') }}</div>
        </div>
        <div class="invite-tab-line"></div>
        <div class="invite-tab">
          <img src="/static/img/fzX_29512232_9kK.6f75d24b.png" :alt="_t18('invite_tab_2')" />
          <div class="invite-tab-label">{{ _t18('invite_tab_2') }}</div>
        </div>
        <div class="invite-tab-line"></div>
        <div class="invite-tab">
          <img src="/static/img/xEB_71eca402_ZDf.348ed1f4.png" :alt="_t18('invite_tab_3')" />
          <div class="invite-tab-label">{{ _t18('invite_tab_3') }}</div>
        </div>
      </div>
    </div>

    <!-- 白色内容卡片 -->
    <div class="invite-content">
      <div class="invite-card">
        <div class="invite-card-title">{{ _t18('invite_card_title') }}</div>

        <!-- 推广码 -->
        <div class="invite-card-row">
          <span class="invite-card-label">{{ _t18('invite_promo_code') }}</span>
          <div class="invite-card-value-wrap">
            <span class="invite-card-value">{{ promotionCode }}</span>
            <div class="invite-card-copy" @click="copyPromotionCode">
              <img src="@/assets/defi/cope.png" alt="copy" />
            </div>
          </div>
        </div>

        <!-- 推荐链接 -->
        <div class="invite-card-row">
          <span class="invite-card-label">{{ _t18('invite_link') }}</span>
          <div class="invite-card-value-wrap">
            <span class="invite-card-value invite-card-link-text">{{ shareLink }}{{ promotionCode }}</span>
            <div class="invite-card-copy" @click="copyShareLink">
              <img src="@/assets/defi/cope.png" alt="copy" />
            </div>
          </div>
        </div>

        <!-- 输入上级邀请码 -->
        <div class="invite-card-input-row">
          <input
            type="text"
            class="invite-card-input"
            :placeholder="_t18('invite_input_placeholder')"
            v-model="superiorCode"
          />
          <button class="invite-card-bind-btn" @click="bindSuperiorCode">{{ _t18('invite_bind_btn') }}</button>
        </div>

        <!-- 收益比例 -->
        <div class="invite-card-benefit-row">
          <div class="invite-card-benefit">
            <div class="invite-card-benefit-num">5%</div>
            <div class="invite-card-benefit-label">{{ _t18('invite_profit_1') }}</div>
          </div>
          <div class="invite-card-benefit">
            <div class="invite-card-benefit-num">3%</div>
            <div class="invite-card-benefit-label">{{ _t18('invite_profit_2') }}</div>
          </div>
          <div class="invite-card-benefit">
            <div class="invite-card-benefit-num">1%</div>
            <div class="invite-card-benefit-label">{{ _t18('invite_profit_3') }}</div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="invite-card-bottom-row">
          <div class="invite-card-qr" @click="showQrPopup = true">
            <img src="/static/img/5s2_3b3805b2_o3h.c4252978.png" alt="qr icon" />
          </div>
          <button class="invite-card-poster-btn" @click="openPosterPopup">{{ _t18('invite_poster_btn') }}</button>
        </div>
      </div>
    </div>

    <!-- 收益统计卡片 -->
    <div class="earnings-card">
      <div class="earnings-header">
        <span class="earnings-title">{{ _t18('invite_my_income') }}</span>
        <span class="earnings-detail" @click="goToEarningsDetail">{{ _t18('invite_detail') }} ></span>
      </div>

      <div class="earnings-main">
        <div class="earnings-item">
          <div class="earnings-value">{{ myCommission }}</div>
          <div class="earnings-label">{{ _t18('invite_my_rebate') }}</div>
        </div>
        <div class="earnings-item">
          <div class="earnings-value">{{ invitedFriends }}</div>
          <div class="earnings-label">{{ _t18('invite_friends_count') }}</div>
        </div>
      </div>

      <div class="earnings-stats">
        <div class="stat-item" v-for="(item, idx) in statItems" :key="idx">
          <span class="stat-label">{{ item.label }}</span>
          <span class="stat-value">{{ item.value }}</span>
        </div>
      </div>
      <img style="width: 100%;" src="/static/img/8WD_87341956_jWM.0a2ad736.png" alt="">
    </div>

    <!-- ✅ 海报弹窗 -->
    <van-popup
      v-model:show="showPosterPopup"
      position="bottom"
      class="poster-popup"
      round
      :style="{ pointerEvents: showPosterPopup ? 'auto' : 'none' }"
    >
      
      <div class="poster-container" ref="posterRef">
        <img class="poster-bg" src="/static/img/eFJ_b304b7e3_b5y.98a49992.png" alt="poster" />
        <!-- ✅ 新增海报顶部文字 -->
        <div class="poster-title">您購買的可以開啟新生活</div>
        <img class="poster-qr" :src="qrCodeImg" alt="QR Code" />
        <div class="poster-code">ID: {{ promotionCode }}</div>
        <div class="poster-footer">
          <img src="/static/img/8WD_87341956_jWM.0a2ad736.png" class="poster-logo" />
          <div>
            <div class="poster-footer-text">Dcoin</div>
            <div class="poster-extra-text">首個人工智能交易平台</div>
          </div>
        </div>
      </div>

      <div class="poster-btns">
        <button class="poster-cancel" @click="showPosterPopup = false">取消</button>
        <button class="poster-save" @click="savePoster">保存至相簿</button>
      </div>
    </van-popup>

    <!-- 原二维码弹窗 -->
    <van-popup v-model:show="showQrPopup" position="center" class="qr-popup" round>
      <div class="qr-popup-box">
        <div class="qr-close" @click="showQrPopup = false">×</div>
        <img class="qr-top-icon" src="/static/img/j2c_e939aef5_3J3.5cae2301.png" alt="QR icon" />
        <p class="qr-popup-title">掃碼加入</p>
        <img :src="qrCodeImg" alt="QR" class="qr-popup-img" />
        <div class="qr-popup-footer">
          <img src="/static/img/8WD_87341956_jWM.0a2ad736.png" alt="logo" class="qr-footer-logo" />
          <span class="qr-footer-text">Dcoin</span>
        </div>
      </div>
    </van-popup>

    <!-- 说明弹窗 -->
    <teleport to="body">
      <transition name="fade">
        <div v-if="showExplainModal" class="explain-modal-mask" @click.self="closeExplainModal">
          <div class="explain-modal">
            <div class="explain-title">{{ _t18('invite_explain_title') }}</div>
            <div class="explain-content">{{ _t18('invite_explain_content') }}</div>
            <button class="explain-btn" @click="closeExplainModal">{{ _t18('invite_explain_confirm') }}</button>
          </div>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import html2canvas from 'html2canvas'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user/index'
import QRCode from 'qrcode'

const router = useRouter()
const showQrPopup = ref(false)
const showPosterPopup = ref(false)
const showExplainModal = ref(false)
const posterRef = ref(null)

const useStore = useUserStore()
const userInfo = useStore.userInfo
const promotionCode = ref(userInfo?.user?.activeCode)
const shareLink = ref(`${location.origin}/#/i&`)
const superiorCode = ref('')
const myCommission = ref('0')
const invitedFriends = ref('0')
const statItems = ref([
  { label: '今日用戶', value: 0 },
  { label: '今日金額', value: 0 },
  { label: '今日邀請', value: 0 },
  { label: '有效用戶', value: 0 }
])

const qrCodeImg = ref('')

const createQRImage = () => {
  const address = shareLink.value + promotionCode.value
  if (address) {
    QRCode.toDataURL(address, {
      errorCorrectionLevel: 'H',
      margin: 2,
      scale: 3,
      width: 170,
      color: { dark: '#000', light: '#fff' }
    }).then((url) => (qrCodeImg.value = url))
  }
}

const openPosterPopup = () => (showPosterPopup.value = true)

const savePoster = async () => {
  if (!posterRef.value) return
  try {
    const canvas = await html2canvas(posterRef.value, { useCORS: true, scale: 2 })
    const link = document.createElement('a')
    link.href = canvas.toDataURL('image/png')
    link.download = 'invite_poster.png'
    link.click()
    showToast('保存成功')
  } catch (err) {
    console.error(err)
    showToast('保存失敗')
  }
}

function openFaq() {
  showExplainModal.value = true
}
function closeExplainModal() {
  showExplainModal.value = false
}
function goToEarningsDetail() {
  router.push('/invite-detail')
}
function copyPromotionCode() {
  navigator.clipboard.writeText(promotionCode.value).then(() => showToast('推廣碼已複製'))
}
function copyShareLink() {
  const fullLink = shareLink.value + promotionCode.value
  navigator.clipboard.writeText(fullLink).then(() => showToast('推薦連結已複製'))
}
function bindSuperiorCode() {
  if (!superiorCode.value) return showToast('請輸入上級邀請碼')
  showToast('綁定成功')
}

onMounted(() => {
  createQRImage()
})
</script>

<style scoped lang="scss">
.invite-friend-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.invite-header {
  position: relative;
  height: 280px;
  background: rgba(40, 80, 231, 0.93);
  overflow: hidden;
  
  .invite-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.13;
  }
  
  .invite-header-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px 0;
    
    .invite-back,
    .invite-help {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }
  
  .invite-title {
    position: relative;
    z-index: 2;
    text-align: left;
    margin-left: 25px;
    margin-top: 20px;
    
    .invite-title-main {
      font-size: 24px;
      font-weight: bold;
      color: white;
      margin-bottom: 8px;
    }
    
    .invite-title-sub {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .invite-tabs {
    padding: 0 20px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 10px;
    .invite-tab-line{
        width: 120px;
        height: 1px;
        background: rgba(255, 255, 255, 0.8);
         
    }
    .invite-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      
      img {
        width:60px;
        height: 60px;
        margin-bottom: 8px;
        opacity: 0.6;
        transition: opacity 0.3s;
      }
      
      .invite-tab-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        transition: color 0.3s;
      }
      
      &.invite-tab-active {
        img {
          opacity: 1;
        }
        
        .invite-tab-label {
          color: white;
        }
      }
    }
  }
}

// 通知栏
.notification-bar {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  padding: 12px 15px;
  
  .notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    .notification-icon {
      width: 16px;
      height: 16px;
    }
    
    .notification-text {
      color: white;
      font-size: 14px;
      font-weight: 500;
    }
  }
}

// 收益统计卡片
.earnings-card {
  margin: 15px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .earnings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .earnings-title {
      font-size: 16px;
      font-weight: bold;
      color: #000;
    }
    
    .earnings-detail {
      font-size: 14px;
      color: #000;
      cursor: pointer;
    }
  }
  
  .earnings-main {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    
    .earnings-item {
      flex: 1;
      background: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      text-align: center;
      
      .earnings-value {
        font-size: 24px;
        font-weight: bold;
        color: #000;
        margin-bottom: 4px;
      }
      
      .earnings-label {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .earnings-stats {
    .stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0; 
      
      &:last-child {
        border-bottom: none;
      }
      
      .stat-label {
        font-size: 14px;
        color: #666;
      }
      
      .stat-value {
        font-size: 14px;
        color: #000;
        font-weight: 500;
      }
    }
  }
}

.invite-content {
  margin-top: -20px;
  padding: 0 15px;
  position: relative;
  z-index: 3;
}

.invite-card {
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 24px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  
  .invite-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin-bottom: 24px;
  }
  
  .invite-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .invite-card-label {
      font-size: 14px;
      color: #666;
    }
    
    .invite-card-value-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .invite-card-value {
        font-size: 14px;
        color: #000;
        font-weight: 500;
        
        &.invite-card-link-text {
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      
      .invite-card-copy {
        width: 20px;
        height: 20px;
        cursor: pointer;
        
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  
  .invite-card-input-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    
    .invite-card-input {
      flex: 1;
      height: 44px;
      padding: 0 16px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .invite-card-bind-btn {
      width: 80px;
      height: 44px;
      background: #000;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
      
      &:hover {
        background: #555;
      }
    }
  }
  
  .invite-card-benefit-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    
    .invite-card-benefit {
      text-align: center;
      flex: 1;
      
      .invite-card-benefit-num {
        font-size: 20px;
        font-weight: bold;
        color: #000;
        margin-bottom: 4px;
      }
      
      .invite-card-benefit-label {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .invite-card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .invite-card-qr {
      width: 60px;
      height:44px;
      background: #000;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        width: 30px;
        height: 30px;
      }
    }
    
    .invite-card-poster-btn {
      flex: 1;
      height: 44px;
      background: #000;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      margin-left: 16px;
      cursor: pointer;
      transition: background 0.3s;
      
      &:hover {
        background: #555;
      }
    }
  }
}

// 底部图片
.bottom-image {
  padding: 20px 15px;
  text-align: center;
  
  img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 8px;
  }
}

// 说明弹窗样式
.explain-modal-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.explain-modal {
  width: 100%;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 28px 18px 18px 18px;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  margin-bottom: 0;
  animation: slideUp .25s;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.explain-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 18px;
}
.explain-content {
  font-size: 15px;
  color: #222;
  line-height: 1.7;
  margin-bottom: 28px;
  white-space: pre-line;
}
.explain-btn {
  width: 100%;
  height: 44px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 0;
  cursor: pointer;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
/* ✅ 新增弹窗样式 */
/* ✅ 弹窗样式优化：整体上移、保持居中、美观 */
.qr-popup {
  background: #fff;
  border-radius: 12px;
  padding: 20px 25px 30px;
  width: 80%;
  max-width: 320px;
  text-align: center;
  position: fixed; /* 改成 fixed */
  top: 45%; /* 上移弹窗 */
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}
.qr-close {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 22px;
  color: #888;
  cursor: pointer;
}
.qr-top-icon {
  width: 36px;
  height: 36px;
  margin: 10px auto;
  display: block;
}
.qr-popup-title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin: 10px 0 20px;
}
.qr-popup-img {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto 20px;
}
.qr-popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-footer-logo {
  width: 28px;
  height: 28px;
  margin-right: 6px;
}
.qr-footer-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.qr-popup-img {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto 20px;
}
.qr-popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-footer-logo {
  width: 28px;
  height: 28px;
  margin-right: 6px;
}
.qr-footer-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
/* 原样式不动，这里只补充新增部分 */

.poster-container {
  position: relative;
  // 保持固定宽度和居中，这样它就不会贴边
  width: 320px; 
  margin: 0 auto; 
  overflow: hidden;
  border-radius: 12px;
}

.poster-bg {
  width: 100%;
  display: block;
}

/* ✅ 加入图片内文字 */
.poster-text {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.poster-qr {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 8px;
}

.poster-code {
  position: absolute;
  bottom: 55px; /* ✅ 减小 20px，向下移动 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.poster-footer {
  position: absolute;
  bottom: 10px;
  left: 16%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo */
.poster-logo { width: 40px; height: 40px; margin-right: 20px; }

/* “Dcoin”文字 */
.poster-footer-text {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-right: -150px;
}

/* “首個人工智能交易平台”副标题 */
.poster-extra-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
   margin-right: -150px;
}


/* ✅ 底部按钮区域保持白底 */
.poster-btns {
  display: flex;
  justify-content: space-between;
  background: #fff;
  gap: 14px;
  border-top: 1px solid #eee;
  
  // 保持海报与按钮之间的间隙
  margin-top: 25px; 
  
  // ✅ 核心修改：移除固定宽度和自动边距，确保按钮区域拉伸到100%宽度
  width: 100%; 
  margin-left: 0;
  margin-right: 0;
  
  // ✅ 关键修改：增加底部 padding (例如 20px) 来“拉高”白色区域，同时左右 padding 保持 20px
  padding: 16px 20px 20px; 
  
  // (可选) 推荐增加安全区底部内边距，以兼容刘海屏设备
  // padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); 

  .poster-cancel {
    background: #fff;
    border: 2px solid #ff4d4f;
    color: #ff4d4f;
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
  }

  .poster-save {
    background: #246bff;
    color: #fff;
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
  }
}

/* ✅ 从底部往上弹出动画保持 */
.poster-popup {
  background: transparent; 
  border-radius: 18px 18px 0 0;
  padding: 0; /* ✅ 彻底移除所有 padding，让内容元素控制自己的边距 */
  animation: slideUp 0.3s ease-out;
}

.poster-header-tip {
  text-align: center;
  font-size: 15px;
  color: #fff; 
  margin: 0 0 10px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
}



@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 确保这段 CSS 在你的 <style> 标签中 */
.poster-title {
  position: absolute; /* 绝对定位，以便覆盖在背景图上 */
  top: 40px; /* 调整距离顶部的距离 */
  left: 10px; /* 调整距离左侧的距离 */
  right: 10px; /* 留出右侧边距 */
  text-align: center; /* 左对齐 */
  color: #fff; /* 白色文字 */
  font-size: 20px; /* 字体大小 */
  //font-weight: bold; /* 加粗 */
  z-index: 10; /* 确保在背景图之上 */
}
</style> 